<template>
  <div class="m-invent">
    <!--form-->
    <el-form class='module-form' ref="form" style="position:relative;" label-width='80px'
             :model="searchFrom"
             :inline="true">
      <el-form-item class='module-form-item' label="商品名称">
        <el-input v-model="searchFrom.aGoodsName" :disabled="true"></el-input>
        <el-button class="attr-btn" @click="showDialogSelect('goodsSelectList')">...
        </el-button>
      </el-form-item>
      <el-form-item class='module-form-item' label="串码">
        <el-input v-model="searchFrom.aMatId"></el-input>
      </el-form-item>
      <attr-search
        ref='attrSearch' aType='0'
      />
      <el-form-item label="状态">
        <el-select v-model="searchFrom.aStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="m-invent-from-right-btn">
        <el-button @click="clearSearch">清空</el-button>
        <el-button @click="searchClick">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <a-table :cols="cols" :data="data">
      <el-table-column align="center" label="操作" width='150' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='choose(scope.row.id)'>相关单据</el-button>
            <el-button size='mini' @click='showCostDetail(scope.row)'>收支</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>

    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
    <!--属性选择列表-->
    <goods-select-list ref="goodsSelectList" @handelGoodsSelectList="handelGoodsSelectList"></goods-select-list>
    <!--收支dialog-->
    <cost-detail-dialog ref='costDetailDialog' :title='billName' :id='id'/>

  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import AttrSearch from '@/components/business/AttrSearch'
  import goodsSelectList from '@/module/invent/components/goodsSelectList'
  import costDetailDialog from '@/module/stock/components/costDetailDialog'

  export default {
    name: 's-stock_codeList',
    components: {
      AttrSearch,
      goodsSelectList,
      costDetailDialog
    },
    data() {
      return {
        value1: '',
        cols: [
          {label: '商品名称', prop: 'name', minWidth: '150'},
          {label: 'SKU属性值', prop: 'attr_desc', minWidth: '150'},
          {label: '串码值', prop: 'id', minWidth: '150'},
          {label: '毛利', prop: 'gross', minWidth: '150', filter: window.$tools.filterPrice},
          {label: '纯利', prop: 'profit', minWidth: '150', filter: window.$tools.filterPrice},
          {label: '串码状态', prop: 'status', minWidth: '150', filter: window.$tools.filterCodeStatus}
        ],
        data: [],
        ifRequesting: false,
        dialogSelect: false, // 属性选择是否打开
        selectType: '',  // 选择类型
        selectId: '1',
        supplyGetMySkus: '',
        crmGetIntents: '',
        attrSearch: false, // 进货形式

        // 表单
        searchFrom: {
          id: '',
          aGoodsName: '',
          aStatus: 1,
          aGoodsId: '',
          aAttrs: [],
          aMatId: ''
        },
        options: [
          {value: 1, label: '在库'},
          {value: 2, label: '售出'},
          {value: 3, label: '借出'}
        ],
        id: '',
        billName: '',
        dates: '',
        isFirst: true
      }
    },
    mounted() {
      this.$refs.page.changePage()
    },

    activated() {
      if (this.isFirst) {
        this.isFirst = false
        return false
      }
      this.$refs.page.changePage()
    },

    methods: {
      ...mapMutations(['setTabRoutes']),

      routerPush(type, args) {
        // push 到缓存里
        this.setTabRoutes({type: 'add', obj: {...this.getRouterInfoAccordingName(type), ...args}})
      },
      async fetchData(aPageNum, aPageSize) {
        const params = {
          aFirmId: this.aFirmId,
          aPageNum,
          aPageSize
        }
        if (this.$refs.attrSearch) {
          params.aAttrs = this.$refs.attrSearch.getData()
        }
        // 遍历对象的值 如果不为空的话 就合并对象
        if (Object.values(this.searchFrom).toString().replace(/,/g, '')) {
          Object.assign(params, this.searchFrom)
        }
        return this.$api.stockGetMatStock(params)
      },

      getData(data) {
        this.data = data
      },

      // 路由跳转
      jump() {
        this.routerPush('invent_create')
        this.$router.push({name: 'invent_create'})
      },

      searchFun() {
        this.$refs.page.changePage()
      },

      clearSearch() {
        this.searchFrom.aGoodsName = ''
        this.searchFrom.aAttrs = ''
        this.attrSearch = false
        this.$refs.attrSearch.clear()
        this.searchFun()
      },

      searchClick() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$refs.page.changePage()
          }
        })
      },

      choose(id) {
        const query = {id}
        this.routerPush('stock_billList', {query})
        this.$router.push({name: 'stock_billList', query})
      },

      // 显示选择属性列表
      showDialogSelect(type) {
        this.$refs[type].$show()
      },

      handelGoodsSelectList(val) {
        this.searchFrom.aGoodsId = val.id
        this.searchFrom.aGoodsName = val.name
      },

      showCostDetail({id, goods_id, name}) {
        this.id = id
        this.billName = name
        this.$refs.costDetailDialog.$show(id)
      }

    }
  }
</script>
<style lang="less">
  .m-invent {
    .module-form {
      display: flex;
      flex-wrap: wrap;
    }
    .module-form-item {
      width: 50%;
      margin-right: 0;
      display: flex;
      align-items: center;
      .el-form-item__content {
        flex: 1;
      }
      .el-input, .el-date-editor {
        width: 100%;
      }
    }
    .attr-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }

  .m-invent-from-left {
    width: 70%;
    float: left;
  }

  .m-invent-from-right {
    display: flex;
    align-items: center;
    height: 100%;
    .m-invent-from-right-btn {
      white-space: nowrap;
    }
  }
</style>
